<template>
	<view class="friend-notice-page"  :class="[$Im.getTheme()]">
		<sxran-im-content title='好友通知'>
			<view class="friend-notice-body">
				<sxran-im-list>
					<view class="friend-notice-item" v-for="(item,index) in notificationList" :key="index">
						<sxran-im-list-item :title="item.fromInfo.nick" :avatarUrl='item.fromInfo.avatar'
							:note='item.content'>
							<template v-slot:right>
								<sxran-im-text :text="toFriendlyTime(item.serviceCreateTime)" type='info' size="12" align="right"></sxran-im-text>
								<view class="item-slot-rigt">
									<view style="margin-right: 20px;" @click="agree(item)" v-if="item.isRead == 0">
										<sxran-im-text text="同意" type='primary' size="14"></sxran-im-text>
									</view>
									<view @click="refuse(item)" v-if="item.isRead == 0">
										<sxran-im-text text="拒绝" type='info' size="14"></sxran-im-text>
									</view>
									<view v-if="item.isRead == 1">
										<sxran-im-text text="已添加" type='info' size="14" align="right"></sxran-im-text>
									</view>
								</view>
							</template>
						</sxran-im-list-item>
					</view>
				</sxran-im-list>
			</view>

		</sxran-im-content>
	</view>


</template>

<script>
	export default {
		name: 'friend-notice',
		computed: {
			notificationList() {
				return uni.$Im.getNotificationList();
			},
			toFriendlyTime() {
				return function(time) {
					let timestamp = time + uni.$Im.getHeartbeat() * 0;
					return uni.$u.toFriendlyTime(timestamp)
				}
			}
		},
		data() {
			return {

			}
		},
		mounted() {
		},
		methods: {
			/**
			 * 
			 * 同意
			 */
			agree(data) {
				console.log(data)
				//params
				const params = {
					fromUid: data.fromUid,
					message: '',
				}
				uni.$Im.acceptFriendApplication(params, res => {
					uni.$Im.readNotification({
						uuid: data.uuid,
						toId: data.toId
					})
				});
			},
			/**
			 * 
			 * 拒绝
			 *	
			 */
			refuse(data) {
				console.log(data)
				//params
				const params = {
					fromUid: data.fromUid,
					message: '',
				}
				uni.$Im.refuseFriendApplication(params, res => {
					uni.$Im.readNotification({
						uuid: data.uuid,
						toId: data.toId
					})
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.friend-notice-page {
		width: 100%;
		height: 100%;
	}

	.friend-notice-body {
		height: 100%;
		width: 100%;

		.friend-notice-item {
			border-radius: $uni-border-radius-lg;
			overflow: hidden;
			:deep(.sxran-im-cell){
				background-color: transparent;
			}
			// margin-bottom: $uni-spacing-col-lg;
			// padding: 0 $uni-spacing-row-lg;
		}

		.item-slot-rigt {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			// :deep(.u-text) {
			// 	padding: 0 10px !important;
			// }
		}

	}
</style>